<template>
  <div class="main">
    <el-row>
      <el-col :span="6">
        <el-input placeholder="请输入搜索内容" icon="search" class="search" v-model="search"></el-input>
      </el-col>
      <el-col :span="7" style="margin-left:20px;">
        <div class="block">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="query">查询</el-button>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="add">添加</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" :fit="true" @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" border style="width: 90%;" v-loading="loading2" element-loading-text="拼命加载中">
        <el-table-column type="selection" align="center" width="60">
        </el-table-column>
        <el-table-column type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template scope="scope">
                <img :src="scope.row.img" width="80" height="80" class="head_pic" />
</template>
        </el-table-column>
        <el-table-column prop="update_time" label="添加时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
<template slot-scope="scope">
  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
    编辑</el-button>
  <el-button size="mini" type="danger" @click="deleteRow(scope.$index, tableData)">删除</el-button>
</template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-button type="success" @click="delGroup" :disabled="this.sels.length === 0">批量删除</el-button>
      </el-col>
      <el-col :span="8">
        <el-pagination background layout="prev, pager, next" :total="50">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      sels: [], //选中的值显示
      search: "",
      value1: "",
      loading2: false,
      tableData: [
        //  {
        //     date: "2016-05-02",
        //     name: "香辣鸡翅",
        //     head_pic: "https://qq897425998.github.io/Menu/images/index/wing.jpg"
        //   },
        //   {
        //     date: "2016-05-04",
        //     name: "芹菜炒牛肉",
        //     head_pic: "https://qq897425998.github.io/Menu/images/index/beef.jpg"
        //   },
        //   {
        //     date: "2016-05-01",
        //     name: "蚝皇凤爪",
        //     head_pic: "https://qq897425998.github.io/Menu/images/index/feet.jpg"
        //   },
        //   {
        //     date: "2016-05-03",
        //     name: "土豆红烧肉",
        //     head_pic: "https://qq897425998.github.io/Menu/images/index/meat.jpg"
        //   }
      ]
    };
  },
  methods: {
    query() {
      if (this.schfilter == "") {
        alert("搜索内容不能为空");
        return;
      }
    },
    add() {
      this.$router.push("/additem");
    },
    // select-all(selection){
    // },
    selsChange(sels) {
      this.sels = sels;
    },
    //批量删除
    delGroup() {
      console.log(this.tableData);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios.delete(`/menus${this.tableData[index].id}`).then(res => {
            var ids = this.sels.map(item => item.id).join(); //获取所有选中行的id组成的字符串，以逗号分隔
            ids.push(tableData[index].id);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleCurrentChange(row, event, column) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row);
      // var newsID=this.$route.query.id;
      this.$router.push({
        name: "additem",
        params: {
          id: this.tableData[index].id
        }
      });
      // axios({
      //   method:"post",
      // url:"/menus+'/'+this.tableData[index].id",
      // url: '/menus/' + newsID
      // })
    },
    // handleDelete(index, row) {
    //   console.log(index, row);
    // },
    // 删除
    deleteRow(index, rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .delete(`/menus?ids=${this.tableData[index].id}`)
            //  axios.delete(`/menus+"/"+this.tableData[index].id`)
            .then(res => {
              this.tableData.splice(index, 1),
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  // 拉取数据
  mounted() {
    const _this = this;
    this.loading2 = true;
    axios.get("/menus").then(res => {
      this.tableData = res.data.data;
      this.loading2 = false;
    });
  },
  computed: {
    tables: function() {
      var search = this.search;
      if (search) {
        return this.tableData.filter(function(dataNews) {
          return Object.keys(dataNews).some(function(key) {
            return (
              String(dataNews[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      return this.tableData;
    }
  }
};
</script>
<style scoped>
.main {
  padding: 30px 34px;
  position: relative;
  margin: 20px;
  background: #fff;
  width: 70%;
  /* border-radius: 20px; */
  box-shadow: 0 2px 4px 0 rgba(7, 17, 27, 0.06);
}
.el-input .el-input__inner {
  height: 28px;
  width: 220px;
  padding-left: 6px;
  border: 1px solid #dcdcdc;
  font-size: 12px;
  color: #252525;
}
.el-table {
  margin: 40px 0;
}
.el-button--primary {
  margin-left: 20px;
}
.el-pagination {
}
.has-gutter div.cell {
  text-align: center !important;
}
</style>

